<style>
body, html, div, p, span, a, h1, h2, h3, h4, h5{
    margin: 0;
    padding: 0;
}

body p{
    font-size: 14px;
}

body p a{
    font-size: 16px;
}

h1 {
    color: #E05E00;	
    font-style: italic;
}

a{
    color: #E05E00;	
    text-decoration: none;
}

a:hover{
    text-decoration: underline;
}

/* general */
.clear {
    clear: both;
}

/* Header */
.brand{
    color: #E05E00 !important;	
    font-family: georgia;
    font-style: italic;
}

/* list stuff */
#org{
    background-color: white;
    margin: 10px;
    padding: 10px;
}

#show-list{
    cursor: pointer;
}

/* bootstrap overrides */
.alert-message{
    margin: 2px 0;
}

.topbar{
    position: absolute;
}

/* Custom chart styling */
.jOrgChart {
    margin: 10px;
    padding: 20px;
    overflow-x: scroll;
}

/* Custom node styling */
.jOrgChart .node {
    margin: 0px 25px;
    color: #333333;
}
.jOrgChart .child-one {
    padding: 6px 10px;
    min-width: 60px;
    background-color: #27CDFD;
    color: #333333;
    border-radius: 8px;
}
.jOrgChart .child-two {
    min-width: 58px;
    min-height: 58px;
    line-height: 58px;
    padding: 2px;
    white-space:nowrap;
    border-radius: 50%;
    background-image: url(../../../dist/style/res/chart/twoCircle.png);
    background-size: 100% 100%;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../dist/style/res/chart/twoCircle.png',sizingMethod='scale');
	-ms-behavior: url("../../../dist/style/res/chart/backgroundsize.min.htc");
	behavior: url("../../../dist/style/res/chart/backgroundsize.min.htc");
    background-repeat: no-repeat;
    background-position: left top;
}
.jOrgChart .child-normal {
    padding: 0px 10px;
    min-width: 60px;
    height: 30px;
    line-height: 30px;
    white-space:nowrap;
    background-image: url(../../../dist/style/res/chart/polygon.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: left top;
    -ms-behavior: url(../../dist/style/res/PIE.htc);
    behavior: url(../../dist/style/res/PIE.htc);
    -ms-behavior: url(../../dist/style/res/backgroundsize.min.htc);
    behavior: url(../../dist/style/res/backgroundsize.min.htc);
}
.jOrgChart .child-person {
    min-width: 60px;
}
.jOrgChart .child-person .person-icon {
    width: 32px;
    height: 40px;
    margin: 0 auto;
    background-image: url(../../../dist/style/res/chart/user.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: left top;
    -ms-behavior: url(../../dist/style/res/backgroundsize.min.htc);
    behavior: url(../../dist/style/res/backgroundsize.min.htc);
}
.jOrgChart .child-person .person-text {
    display: block;
    white-space:nowrap;
    padding: 3px 5px;
    font-size: 12px;
}
.jOrgChart .child-unit {
    position: relative;
}
.child-unit .time-icon {
    position: absolute;
    top:0px;
    left:-17px;
    display: block;
    width: 16px;
    height: 16px;
    background-image: url(../../../dist/style/res/chart/time-ic.png);
    background-repeat: no-repeat;
    background-position: left top;
}
.child-unit .collapse-icon {
    position: absolute;
    top:8px;
    right:-17px;
    display: block;
    width: 14px;
    height: 14px;
    line-height: 14px;
    font-size: 12px;
    border:1px solid #60E2BC;
    color: #60E2BC;
}
.node p{
    font-family: tahoma;
    font-size: 10px;
    line-height: 11px;
    padding: 2px;
}
.task-jorgchart-content table {
    border-collapse: separate;
}
.task-jorgchart-content .self-chart-table {
    margin: 0 auto;
}
</style>
<script type="text/html" template lay-done="layui.data.taskChartDone(d);">
    <div class="task-jorgchart-content">
        <ul id="org" style="display:none"></ul>
        <div id="chart" class="orgChart"></div>
    </div>
</script>
<script>
layui.data.taskChartDone = function (d) { 
    layui.use(['admin', 'layer'], function(){
        var view = layui.view,
            args = d.params.args,
            layer = layui.layer;
        var infos = d.params.info, nodestr = '',taskType = d.params.type, tid = d.params.tid;
        makeChilds(infos,0,'0');
        function makeChilds(arr, lay, start) {
            if(arr.length && arr.length > 0) {
                $.each(arr, function(index, item) {
                    var nowStr = '';
                    if(item.leve === 0) {
                        nowStr ='<li class="T-layindex'+start+''+lay +''+index +'">'+
                            '<div class="child-one child-unit" data-id="'+ item.id +'" data-taskid="'+ tid +'" data-link="'+ item.link+'">'+
                                item.writeusername +
                                '<span class="time-icon"></span>'+
                                ((item.children.length && item.children.length > 0) ? '<span class="collapse-icon T-collapse">━</span>' : '') + 
                            '</div>'+
                        '</li>';
                    }else if(item.leve === 1) {
                        nowStr ='<li class="T-layindex'+start+''+lay +''+index +'">'+
                            '<div class="child-two child-unit" data-id="'+ item.id +'" data-taskid="'+ tid +'" data-link="'+ item.link +'">'+
                                item.writeusername +
                                '<span class="time-icon"></span>'+
                                ((item.children.length && item.children.length > 0) ? '<span class="collapse-icon T-collapse">━</span>' : '') + 
                            '</div>'+
                        '</li>';
                    }else { 
                        if(item.writetype !== '3') {
                            nowStr ='<li class="T-layindex'+start+''+lay +''+index +'">'+
                                '<div class="child-normal child-unit" data-id="'+ item.id +'" data-taskid="'+ tid +'" data-link="'+ item.link +'">'+
                                    item.writeusername +
                                    '<span class="time-icon"></span>'+
                                    ((item.children.length && item.children.length > 0) ? '<span class="collapse-icon T-collapse">━</span>' : '') + 
                                '</div>'+
                            '</li>';
                        }else {
                            nowStr ='<li class="T-layindex'+start+''+lay +''+index +'">'+
                                    '<div class="child-person child-unit" data-id="'+ item.id +'" data-taskid="'+ tid +'" data-link="'+ item.link +'">'+
                                        '<div class="person-icon"></div>'+
                                    ' <span class="person-text">'+item.writeusername+'</span>'+
                                    ((item.children.length && item.children.length > 0) ? '<span class="collapse-icon T-collapse">━</span>' : '') + 
                                ' </div>'+
                            '</li>';
                        }
                    }
                    if(index === 0) {
                        if(lay === 0) {
                            nodestr = $(nowStr);
                        }else {
                            var ustr = '<ul>'+ nowStr +'</ul>';
                            if(lay === 1) {
                                nodestr.append(ustr);
                            }else {
                                nodestr.find('.T-layindex'+start).append(ustr);
                            }
                        }
                    }else {
                        if(lay === 1) {
                            nodestr.children('ul').eq(0).append(nowStr);
                        }else {
                            nodestr.find('.T-layindex'+start + ' ul').eq(0).append(nowStr);
                        }
                    }
                    makeChilds(item.children, (lay+1), start+''+lay+''+index);
                })
            }
        }

        $('#org').html(nodestr);

        $("#org").jOrgChart({
            chartElement: '#chart',
            dragAndDrop: false
        });
        $('#chart').find('.child-unit').bind('click',function() {
            var id = $(this).data('id'),
                link = $(this).data('link'),
                taskid = $(this).data('taskid'),
                text = $(this).text().replace('━', '');
                layer.open({
                    id: 'task-chartpoup-html',
                    title:'<i class="formFill-icon"></i><span style="color:#FFF;">填报表单详情-'+text+'</span>',
                    offset: '50px',
                    type: 1,
                    shadeClose: true,
                    area: ['1133px', '600px'],
                    success: function(lay) {
                        var info = {
                            'id':id,
                            'taskid':taskid,
                            'link':link,
                            'type': taskType
                        };
                        view(this.id).render('./task/components/chartPoup',{info: info, args: args});
                    }
                });
        });

        $('#chart').find('.child-unit').bind('mouseover',function(){
            var that = this;
            //layer.tips('明天去重庆了这个项目真的疲惫了', that);
        });
    })
};
</script>